<template>
	<view class="rows p-left20 p-right20 p-top20 p-bot50" v-if="config.length" 
	     :style="{'--color': color}">
		
		
			  
			  
		<block v-for="(item,index) in config" :key="item.config_id">
			<view class="row a-center m-bot20" v-if="item.config_id == 11207">
				<text class="size30 bold">{{item.config_name}}</text>
				<input type="number" class="flex-1 input m-left20 p-left20"
				        v-model="item.config_content"
					   :placeholder="`请输入${item.config_name}`" placeholder-class="placeholder">
			</view>
		</block>
		
		
		
		<block v-for="(item,index) in config" :key="item.config_id">
		
		<view v-if="item.config_type == 1 && item.config_state == 1 && item.config_id != 11207">
		<!--  当行输入框 -->
		<view class="row a-center list">
			<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'"></view>
			<input type="text" v-model="item.config_content" class="flex-1  m-left10 input" 
			       :placeholder="`请输入${item.config_name}`" 
			       placeholder-class="placeholder">
		</view>
		
		<!--  获取验证码 -->
		<view class="row a-center list" v-if=" item.config_id == 11205  && ordInfo.verification == 1">
			<view class="iconfont icon-a-lujing3094 color h7"></view>
			<input type="number" v-model="ordInfo.verCode" class="flex-1 m-left10 input" 
			       placeholder="请输入验证码"
			      placeholder-class="placeholder">
			<view class="Code flexac" @click="getCodeBtn">{{isFlag?'获取验证码':`${dowtTime}S`}}</view>
		</view>
		</view>
		
		<!-- 下拉框 -->
		<view class="row a-center list" v-if="item.config_type == 2 && item.config_state == 1">
			<view class="iconfont icon-a-lujing3094  h7" :class="item.config_must == 1?'color':'color_F7'"></view>
			<input type="text" disabled v-model="item.config_content" class="flex-1 m-left10 input" 
			      :placeholder="`请选择${item.config_name}`" 
			      placeholder-class="placeholder">
			<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
			<picker mode="selector" :range="item.list" @change="choose($event,item.config_id)" class="picker"></picker>
		</view>
		
		
		
		<!-- 单选 -->
		<view class="Multiple" v-if="item.config_type == 9 && item.config_state == 1">
			<view class="d-flex a-center selectTitle">
				<view class="iconfont icon-a-lujing3094  h7" :class="item.config_must == 1?'color':'color_F7'"></view>
				<text class="size26 color_80 m-left10">{{item.config_name}}</text>
			</view>
			<view class="row">
				<block v-for="(subItem,subIndex) in item.list" :key="subIndex">
				<view class="d-flex a-center Single" 
				     :class="{'selectItem':subItem == item.config_content}"
					 @click="SingleBtn(item.config_id,subItem)">
					<view class="singleBox flexac"><view class="minSingle"></view></view>
					<text class="color_64 size30 m-left10">{{subItem}}</text>
				</view>
				</block>
			</view>
		</view>
		
		<!--  多选 -->
		<view class="Multiple" v-if="item.config_type == 5 && item.config_state == 1">
			<view class="d-flex a-center selectTitle">
				<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'"></view>
				<text class="size26 color_80 m-left10">{{item.config_name}}</text>
			</view>
			<view class="row  f-wrap">
				<block v-for="(subItem,subIndex) in item.list" :key="subIndex">
				<view class="d-flex a-center selectList" 
				      :class="{'select':item.flagItem.indexOf(subItem) != -1}"
					  @click="choice(item.config_id,subItem)">
					<view class="box flexac"><view class="iconfont icon-xuanzhong white h6"></view></view>
					<text class="color_64 size30 m-left10">{{subItem}}</text>
				</view>
			  </block>
			</view>
		</view>
		
		<!--  日期 -->
		<timepicker @btnConfirm="btnConfirm2($event,item.config_id)" :showType="item.dateTimeType" v-if="item.config_type == 10 && item.config_state == 1">
			<view class="row a-center list">
				<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'"></view>
				<input type="text" disabled class="flex-1 m-left10 input" v-model="item.config_content" :placeholder="`请选择${item.config_name}`"  
					  placeholder-class="placeholder">  
				<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
			</view>
		</timepicker>
		
		<!-- 省市区 -->
		<view class="row a-center list" @click="showAddPicker(item.config_id)" v-if="item.config_type == 6 && item.config_state == 1">
			<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'"></view>
			<input type="text" disabled class="flex-1 m-left10 input" v-model="item.config_content" :placeholder="`请选择${item.config_name}`"  
				  placeholder-class="placeholder">  
			<view class="iconfont icon-a-zujian7 color_B3 h7"></view>
		</view>
		
		
		<!-- 上传图片 -->
		<view class="Multiple" v-if="item.config_type == 8 && item.config_state == 1">
			<view class="d-flex a-center selectTitle">
				<view class="iconfont icon-a-lujing3094 h7" :class="item.config_must == 1?'color':'color_F7'"></view>
				<text class="size26 color_80 m-left10">{{item.config_name}}</text>
			</view>
			<view class="row">
				<block v-for="(subItem,subIndex) in item.imglist" :key="subIndex">
				<view class="imglist">
					<image :src="$imgUrls(subItem)" mode="aspectFill" class="wh bor_radius_10"></image>
					<image :src="$bossImg('1.png')" class="closeImg" 
					       @click.stop="delImg(item.config_id,subIndex)"></image>
				</view>
				</block>
				<view class="uploadImg flexac" 
				      @click="uploadImg(item.config_id,item.limit)"
				      v-if="item.imglist.length < item.limit">
					<view class="iconfont icon-tianjia size54 color_cc" ></view>
				</view>
			</view>
		</view>
		
		<!-- 备注 -->
		<view class="row bgf7 padding20 bor_radius_10 m-bot20" 
		     v-if="item.config_type == 4 && item.config_state == 1">
			<textarea disable-default-padding class="textarea" v-model="item.config_content" :placeholder="`请输入${item.config_name}`" placeholder-class="placeholder"></textarea>
		</view>
		</block>
	
		
		
		<view class="submit d-flex j-sb">
			<view class="subList flexac cancel size30" @click="cancelBtn">取消</view>
			<view class="subList flexac white bg33 size36" @click="subMit">{{subText}}</view>
		</view>
		
		
		<mpvueCityPicker  :shixian2='shixian2' :pickerValueDefault="cityPickerValueDefault" 
		   @onConfirm="onConfirm"  @onCancel='shixian2 = false' ></mpvueCityPicker>
		   
		<showModel v-if="showModel" @hideModel="showModel = false"></showModel>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import timepicker from '@/components/time-picker.vue';
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	export default {
		name:'from',
		props:['order_id','v_id','VeriCode'],
		components:{
			timepicker,
			mpvueCityPicker
		},
		data() {
			return {
				color: getApp().globalData.color,
				showModel:false,
				ordId:2266,
				dowtTime:60,
				countdown:null,
				isFlag:true,
				ordInfo:'',
				config:'',
				check_info:'',  //sncode_flag 0 审核中 2 审核拒绝
				shixian2:false,
				
				cityPickerValueDefault: [0, 0, 1],     // 默认选择地址
				cityIndex:0,
				
			}
		},
		
	
		methods: {
			customForm(){
				this.$http.post({
					url:'/SRA_CustomerForm/customForm',
					data:{
						ordId:this.ordId,
						VeriCode:this.VeriCode?this.VeriCode:this.bid,
						v_id:this.v_id?this.v_id:this.vid
					}
				}).then(res=>{
					if(res.code != 100) return;
					let result = res.data;
					result.config.forEach((item,index)=>{
						if(item.config_type == 2 || item.config_type == 5 || item.config_type == 9){
							item.list = item.config_content.split('|');
							item.config_content = '';
							item.flagItem = [];
						}
						if(item.config_type == 8){     // 上传图片
							item.config_content = '';
							item.imglist = [];
						}
						if(item.config_type == 1 || item.config_type == 4 || item.config_type == 6 || item.config_type == 10 && item.now_value) {
							item.config_content = item.now_value;
						}
						if(item.config_type == 5 && item.now_value){
							item.flagItem = item.now_value;
							item.config_content = item.now_value.toString();
						} 
						if(item.config_type == 2 || item.config_type == 9 && item.now_value) item.config_content = item.now_value;
						if(item.config_type == 8 && item.now_value){
							item.imglist = item.now_value
							item.config_content = item.now_value.toString();
						};
					})
					if(this.userInfo.nickname) result.config[0].config_content =this.userInfo.nickname
					if(this.userInfo.phone) result.config[1].config_content =this.userInfo.phone
					this.config = result.config;
					if(result.ordInfo.verification == 1) result.ordInfo.verCode = '';
					this.ordInfo = result.ordInfo;
					if(result.check_info) this.check_info = result.check_info;
					this.$BarTitle(result.ordInfo.order_title);
				    
				})
			},
			
			
			subMit(){
				
				if(this.check_info && this.check_info.sncode_flag == 0) return this.$Modal('提示',this.check_info.sncode_content);
				let popTxt = '不能为空';
				for(var i = 0 ;i < this.config.length; i++){
					let item = this.config[i];
					if(item.config_type == 1 && item.config_content == '' && item.config_must == 1){
						this.$Toast(item.config_name + popTxt)
						return false;
					}
					if(!this.$reg.phone.test(this.config[1].config_content) && i == 1 && this.config[1].config_content !=''){
						this.$Toast('请输入正确的手机号码！')
						return false;
					}
					if(item.config_type == 2 && item.config_must == 1  && item.config_content == ''){
						this.$Toast('请选择'+item.config_name+'!')
						return false;
					}
					if(item.config_type == 5 && item.config_must == 1  && item.config_content == ''){
						this.$Toast('请选择'+item.config_name+'!')
						return false;
					}
					if(item.config_type == 6 && item.config_must == 1 && item.config_content == ''){
						this.$Toast('请选择'+item.config_name+'!')
						return false;
					}
					if(item.config_type == 8 && item.config_must == 1  && item.config_content == ''){
						this.$Toast('请上传'+item.config_name+'!')
						return false;
					}
					if(item.config_type == 9 && item.config_must == 1 && item.config_content == ''){
						this.$Toast('请选择'+item.config_name+'!')
						return false;
					}
					if( item.config_type == 10 && item.config_must == 1 && item.config_content == ''){
						this.$Toast('请选择'+item.config_name+'!')
						return false;
					}
				}
				if(this.ordInfo.verCode == '' && this.ordInfo.verification == 1) return this.$Toast('请输入验证码!');
				
				let params = {
					'VeriCode': this.VeriCode?this.VeriCode:this.bid,
					'ordId': this.ordId,
					'jsCode': this.v_id?this.v_id:this.vid,
					'verification': this.ordInfo.verCode
				}
				if(this.ordId == '2270'){
					params.source_bid = uni.getStorageSync('bid')
					params.source_v_id = uni.getStorageSync('vid')
					params.source_open_id = uni.getStorageSync('openid')
				}
				console.log('addFrom params', params)
				this.config.forEach((item,index)=>{
					let name = 'name'+index;
					params[name] = item.config_content;
				})
				this.$showLoading('提交中~')
				this.$http.post({
					url:'/zzj_singleSaleApi/addFrom',
					data:params
				}).then(res=>{
					this.$hideLoading();
					if(res.code != '100') return this.$Toast(res.data);
					if(res.jump_pay == 0) this.$Modal('提示',res.data);
					if(res.jump_pay == 2){
						this.$Modal('支付',res.data).then(res1=>{
							if(res1) this.getPlayinfo(res.sncode_id)
						});
					}
					this.$emit('submit');
					
				})
			},
			
			getPlayinfo(sncode_id){
				this.$http.post({
					url:'/accountPay/getSncodePay',
					data:{
						sncode_id:sncode_id,
					}
				}).then(res=>{
					if(res.code != 100) return this.$Toast(res.msg);
					this.$getPayment(res.data).then(res1=>{
						if(res1) this.$Toast('支付成功');
					})
					
				})
			},
			
			// 日期
			btnConfirm2(event,id){
				 let index = this.config.findIndex((n)=> n.config_id == id);
				 this.config[index].config_content = event.key
			},
			
			
			// 省市区
			showAddPicker(id){
				let index = this.config.findIndex((n)=> n.config_id == id);
				this.cityIndex = index;
				this.shixian2 = true;
			},
			onConfirm(event){
				this.config[this.cityIndex].config_content = event.label;
				this.shixian2 = false;
			},
			
			
			choose(event,id){
			   let index = this.config.findIndex((n)=> n.config_id == id);
			   this.config[index].config_content = this.config[index].list[event.detail.value];
			},
			
			// 单选
			SingleBtn(id,item){
				 let index = this.config.findIndex((n)=> n.config_id == id);
				 this.config[index].config_content = item;
			},
			// 多选
			choice(id,item){
				 let index = this.config.findIndex((n)=> n.config_id == id);
				 if(this.config[index].flagItem.indexOf(item) == -1){
					 this.config[index].flagItem.push(item)
				 }else{
					 let indexof = this.config[index].flagItem.indexOf(item);
					 this.config[index].flagItem.splice(indexof,1)
				 }
				 this.config[index].config_content = this.config[index].flagItem.toString();
			},
			
			// 上传图片
			uploadImg(id,limit){
				let that = this;
				let Index = this.config.findIndex((n)=> n.config_id == id);
				let count = this.config[Index].imglist.length - limit;
				uni.chooseImage({
					count: count,
					sizeType: ['compressed'], 
					sourceType:['album','camera'],
					success(res) {
						that.$showLoading('上传中~')
						let tempFilePaths = res.tempFilePaths;
						tempFilePaths.forEach((item,index)=>{
							that.$common.uploadFile(item).then(res1=>{
								that.$hideLoading();
								if(res1.errcode != 100) return that.$Toast("上传失败~");
								let imgItem = res1.url.substring(22,res1.url.length);
								let list = that.config[Index].imglist;
								list.push(imgItem);
								that.config[Index].config_content = that.config[Index].imglist.toString();
							})
						})
					}
				})
			},
			delImg(id,subIndex){
				let Index = this.config.findIndex((n)=> n.config_id == id);
				this.config[Index].imglist.splice(subIndex,1);
			},
			getCodeBtn(){
				if(!this.vid) return this.showModel = true;
				if(this.check_info && this.check_info.sncode_flag == 0) return this.$Modal('提示',this.check_info.sncode_content);
				if(!this.isFlag) return;
				let config_content = this.config[1].config_content;
				if(!config_content) return this.$Toast("请输入手机号码！");
				if(!this.$reg.phone.test(config_content)) return this.$Toast("手机号码输入有误！");
				this.$http.post({
					url:'/SRA_CustomerForm/verification_code',
					data:{
						ordId: this.ordId,
						phone: config_content,
					}
				}).then(res=>{
					if(res.code != 1000) return this.$Toast(res.cont);
					this.isFlag = false;
					this.countdown = setInterval(()=>{
						if(this.dowtTime > 1) return this.dowtTime --;
						clearInterval(this.countdown);
						this.isFlag = true;
					},1000)
				})
				
			},
			
			cancelBtn(){
				this.$emit('cancelUp')
			}
			
		},
		computed: {
			...mapState(['bid','vid','userInfo']),
			subText(){
				if(this.order_id != 2270) return this.ordInfo.price > 0?`支付${this.ordInfo.price}`:'立即报名'
				return this.ordInfo.order_title;
			}
		},
		watch:{
			order_id:{
				deep:true,
				immediate:true,
				handler(newVal){
					if(!newVal) return;
					this.ordId = newVal;
					this.customForm();
				}
			}
			
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #f7f9fa;
	}
</style>
<style lang="scss" scope>
	.input{
		height: 80rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		font-size: 26rpx;
		color:#333333;
	}
	.Make{
		height: 90rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		padding-left:20rpx;
	}
	.Make::after {
		content: '';
		width: 10rpx;
		height: 32rpx;
		background-color: #000000;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translate(0, -50%);
	}
	.list{
		
		height: 80rpx;
		background-color: #F7F9FA !important;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
		padding-left:20rpx;
		padding-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.list input{
		background-color: #F7F9FA !important;
	}
	.icon-a-lujing3094{
		zoom: 0.6;
	}
	/deep/.placeholder{
		color:#B3B3B3;
	}
	.picker{
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		z-index:101;
	}
	.Code{
		width:156rpx;
		height: 56rpx;
		border-radius: 28rpx;
		background-color: #FFEFF5;
		color:#E61616;
		font-size:24rpx;
	}
	.Multiple{
		width:100%;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
		background-color: #F7F9FA;
		border-radius: 10rpx;
		overflow: hidden;
		position: relative;
	}
	.selectTitle{
		padding:20rpx 20rpx 0 20rpx;
	}
	.selectList,.Single{
		margin:20rpx 30rpx 0 20rpx;
	}
	.selectList .box{
		width:32rpx;
		height: 32rpx;
		border:1rpx solid #ccc;
		border-radius: 4rpx;
	}
	.select .box{
		border:1rpx solid var(--color);
		background-color: var(--color);
	}
	.Single .singleBox{
		width:32rpx;
		height: 32rpx;
		border:1rpx solid #ccc;
		border-radius: 50%;
	}
	.Single .minSingle{
		width:14rpx;
		height: 14rpx;
		border-radius: 50%;
		background-color: #ffffff;
	}
	.selectItem .singleBox{
		border:1rpx solid #E61616;
	}
	.selectItem .minSingle{
		background-color: #E61616;
	}
	.imglist{
		width:150rpx;
		height: 150rpx;
		position: relative;
		background-color: #ffffff;
		border-radius: 10rpx;
		margin-left:20rpx;
		margin-top:30rpx;
	}
	.closeImg{
		width:32rpx;
		height: 32rpx;
		position: absolute;
		top:-10rpx;
		right: -10rpx;
	}
	.uploadImg{
		width:150rpx;
		height: 150rpx;
		margin-left:20rpx;
		margin-top:30rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		border:1rpx solid #cccccc;
	}
	.textarea{
		width: 100%;
		height: 240rpx;
		padding-left:12rpx;
		font-size:26rpx;
		color:#333333;
		position: relative;
	}
	.textarea::after{
		content: '';
		width: 2rpx;
		height: 24rpx;
		background-color: #000000;
		position: absolute;
		left: 0;
		top: 19rpx;
		transform: translate(0, -50%);
	}
	.agree{
		width:32rpx;
		height: 32rpx;
		background-color: #ffffff;
		border:1rpx solid #ccc;
		border-radius: 4rpx;
	}
	.submit{
		width:100%;
		padding:0 30rpx;
		margin:56rpx auto 0;
	}
	.subList{
		width: 270rpx;
		height: 87rpx;
		border-radius: 10rpx;
	}
	.cancel{
		border:1px solid #333333;
	}
</style>
